<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>react计数器</title>
		<script src="js/react.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/react-dom.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/browser.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id='counter'>

		</div>
		<script type="text/babel">
			var Counter=React.createClass({
				getInitialState:function(){
					return {
						count:0
					};
				},
				render:function () {
					return (
						<div>
							<h1>{this.state.count}</h1>
							<button onClick={this.onIncrement}>+</button>
							<button onClick={this.onDecrement}>-</button>
						</div>
					);
				},
				onIncrement:function(){
					var count = this.state.count;
					count++;
					this.setState({count:count});
				},
				onDecrement:function(){
					var count = this.state.count;
					count--;
					this.setState({count:count})				
				}
			});
			ReactDOM.render(
				<Counter/>,
				document.getElementById('counter')
			);
		</script>
	</body>

</html>